<template>
  <div id="header">
    <div class="header-top">
      <div class="header-wrap">
        <div class="header-user">
          <!-- 声明式导航 -->
          尚品汇欢迎您！
          <span v-if="$store.state.user.name" class="username" >
            {{$store.state.user.name}}
            <button class="loginOut" @click="loginOut">退出登录</button>
          </span>
          <span v-else>
            请
            <router-link to="/login">登录</router-link> |
            <router-link to="/register">免费注册</router-link>
          </span>
        </div>
        <div class="header-nav">
          <span><a> <router-link to="/center">我的订单</router-link></a></span>
          <span><a><router-link :to="{name:'shopcart'}">我的购物车</router-link> </a></span>
          <span><a> 我的尚品汇</a></span>
          <span><a> 尚品汇会员</a></span>
          <span><a> 企业采购</a></span>
          <span><a> 关注尚品汇</a></span>
          <span><a> 合作招商</a></span>
          <span class="header-nav-last"><a> 商家后台</a></span>
        </div>
      </div>
    </div>
    <div class="header-bottom header-wrap">
      <div class="header-logo">
        <router-link to="/home">
          <img src="./images/logo.png" alt="logo" />
        </router-link>
      </div>
      <div class="header-search">
        <form @submit.prevent="goSearch">
          <input
            type="text"
            name=""
            id=""
            class="header-search-input"
            v-model="keyword"
          />
          <button class="header-search-btn">搜索</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import {reqLoginOut} from '@/api/user';
export default {
  name: "XHeader",
  data() {
    return {
      keyword: this.$route.query.keyword,
    };
  },
  methods: {
    /*
      需求1：携带关键字参数的同时，携带分类参数
      需求2：携带分类参数的同时，携带关键字参数 （ 如果有关键字参数，就携带上（没有就不携带了））
      需求3：刷新页面，要获取路径中的参数keyword在的输入框中也展示
      需求4：路径改变，输入框中要清空内容
    */
    goSearch() {
      // console.log(this.$route.query);

      const keyword = this.keyword;
      //获取 query参数
      const query = this.$route.query;
      const option = {
        name: "search",
        query: {
          ...query, // 确保拿之前的query和现在的query地址不同（相同跳转不了）
        },
      };
      // 如果用户有输入内容，带参数keyword跳转路由
      // 如果关键字有值，添加参数和新值
      if (keyword) {
        option.query.keyword = keyword;
      } else if (option.query.keyword) {
        // 关键字没有值，并且之前的参数中有关键字
        // 删除之前关键字参数
        delete option.query.keyword;
      }
      /*
        重复跳转会报错：
          原因 用的this.$router.push方法是Vue包装处理过的，处理就是重复跳转会报错
          this.$router.push （Vue中）-->实际调用的是  this.$router.history.push （Vue原型上）-->实际调用的是  window.pushStates（h5原生的）
          解决 改用this.$router.history.push就可以
      */

      // this.$router.push(option);
      // 编程式导航
      this.$router.history.push(option);
    },
    async loginOut(){
      // 退出登录
      // 发送退出请求
      await reqLoginOut()
      // 退出成功后 清除用户数据 跳转回登录页面
      this.$store.commit('user/RESET')  // 注意写法！！！
      this.$router.history.push('/login')
    }
  },
  watch: {
    $route(route) {
      // 监视路径改变
      // 将路径的参数的keyword给输入框的keyword 因为跳转到别的路径keyword为空 输入框也
      this.keyword = route.query.keyword;
    },
  },
};
</script>

<style lang="less" scoped>
.header-top {
  height: 30px;
  line-height: 30px;
  background-color: #eaeaea;
}
.header-wrap {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.header-nav span {
  padding: 0 10px;
  border-right: 2px solid #ccc;
}
.header-nav .header-nav-last {
  padding: 0 0 0 10px;
  border: none;
}
.header-bottom {
  align-items: center;
  height: 100px;
}
.header-search-input {
  width: 500px;
  border: 2px solid #ea4a36;
  padding: 5px;
  outline: none;
}
.header-search-btn {
  width: 80px;
  height: 30px;
  background-color: #ea4a36;
  color: #fff;
  border: none;
}
.username{
  color: green;
}
.loginOut{
  margin-left: 2px;
  cursor: pointer;
  border: none;
}
</style>
